<script lang="ts" setup>
import { get, post, Message, loadFile } from '@/utils'
import List from './components/Table.vue'
import ChartItem from './components/ChartItem.vue'
import useOptions from '@/hooks/useOptions'
const { options } = useOptions({ api: '/server-shop/admin/goods/category/lazy-list' })
const query = reactive({
  categoryId: '',
})
const chart1 = reactive({
  loading: true,
  query: {
    titles: [] as string[],
    data: [] as number[],
    lineColor: '#24A3FF',
    areaColor: '#F5E8FF',
    title: '交易额趋势',
  },
  getData: () => {
    get({ url: '/server-base/admin/stats/order/money/trend' }, ({ data }) => {
      console.log(data)
      const titles: string[] = [],
        values: number[] = []
      data.map(v => {
        const date = v.date.split('-').splice(1, 2).join('-')
        titles.push(date)
        values.push(Number(v.amount))
      })
      chart1.query.titles = titles
      chart1.query.data = values
      chart1.loading = false
    })
  },
})
chart1.getData()
const chart2 = reactive({
  loading: true,

  query: {
    titles: [] as string[],
    data: [] as number[],
    lineColor: '#F77234',
    areaColor: '#FFE4BA',
    title: 'aoq趋势',
  },
  getData: () => {
    get({ url: '/server-base/admin/stats/order/aoq/trend' }, ({ data }) => {
      console.log(data)
      const titles: string[] = [],
        values: number[] = []
      data.map(v => {
        const date = v.date.split('-').splice(1, 2).join('-')
        titles.push(date)
        values.push(Number(v.amount))
      })
      chart2.query.titles = titles
      chart2.query.data = values
      chart2.loading = false
    })
  },
})
chart2.getData()
const chart3 = reactive({
  loading: true,

  query: {
    titles: [] as string[],
    data: [] as number[],
    lineColor: '#3469FF',
    areaColor: '#E8F3FF',
    title: 'aov趋势',
  },
  getData: () => {
    get({ url: '/server-base/admin/stats/order/aov/trend' }, ({ data }) => {
      console.log(data)
      const titles: string[] = [],
        values: number[] = []
      data.map(v => {
        const date = v.date.split('-').splice(1, 2).join('-')
        titles.push(date)
        values.push(Number(v.amount))
      })
      chart3.query.titles = titles
      chart3.query.data = values
      chart3.loading = false
    })
  },
})
chart3.getData()
</script>
<template>
  <div class="page">
    <a-space :size="30" direction="vertical" style="width: 100%">
      <a-row :gutter="30">
        <a-col :span="8">
          <div class="box">
            <ChartItem :loading="chart1.loading" v-bind="chart1.query" />
          </div>
        </a-col>
        <a-col :span="8">
          <div class="box">
            <ChartItem :loading="chart2.loading" v-bind="chart2.query" />
          </div>
        </a-col>
        <a-col :span="8">
          <div class="box">
            <ChartItem :loading="chart3.loading" v-bind="chart3.query" />
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="30">
        <a-col :span="12">
          <a-card title="商品销量TOP20" class="card">
            <List />
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="分类销量TOP20" class="card">
            <template #extra>
              <a-cascader placeholder="请选择" :options="options" v-model="query.categoryId" />
            </template>
            <List :query="query" />
          </a-card>
        </a-col>
      </a-row>
    </a-space>
  </div>
</template>
<style lang="less" scoped>
.page {
  background: #eff0f2 !important;
  .box {
    background: white;
    height: 445px;
    padding: 10px;
  }
  .card {
    :deep(.arco-card-body) {
      height: 450px;
      overflow-y: scroll;
    }
  }
}
</style>
